<template>
  <view>
    <scroll-view
      class="list"
      :style="{
        height: showBtn ? '75vh' : '90vh',
      }"
      scroll-y
    >
      <!-- 隐患详情 S -->
      <view class="info-box">
        <view class="title">隐患信息</view>

        <t-cell-group bordered>
          <t-cell title="所属企业" :note="info.enterpriseName || '--'" />
          <t-cell
            title="隐患详细描述"
            :description="info.description || '--'"
          />
          <t-cell title="隐患部位图片">
            <template #description>
              <view class="img-list">
                <MyImg
                  v-for="(item, index) in imgList"
                  :key="index"
                  class="image-container"
                  :style="{
                    width: '72px',
                    height: '72px',
                  }"
                  fit="cover"
                  :src="item"
                ></MyImg>
              </view>
            </template>
          </t-cell>

          <t-cell title="上报时间" :note="info.createTime || '--'" />

          <t-cell
            title="隐患状态"
            :style="{
              '--td-cell-note-color': statusMap[info.status]?.color,
            }"
            :note="statusMap[info.status]?.name || '--'"
          />
        </t-cell-group>
      </view>
      <!-- 隐患详情 E -->

      <!-- 隐患整改 S -->
      <t-steps
        layout="vertical"
        theme="dot"
        :current="info?.rectifications?.length || 99"
      >
        <t-step-item v-for="(item, index) in info.rectifications" :key="index">
          <template #content>
            <!-- v-if="showRectification" -->
            <view class="rectification-box">
              <view class="title">隐患整改信息</view>

              <t-cell-group bordered>
                <t-cell title="整改图片">
                  <template #description>
                    <view class="img-list">
                      <MyImg
                        v-for="(img, index) in item.pics"
                        :key="index"
                        class="image-container"
                        :style="{
                          width: '72px',
                          height: '72px',
                        }"
                        fit="cover"
                        :src="img.picUrl"
                      ></MyImg>
                    </view>
                  </template>
                </t-cell>

                <t-cell title="消除人员" :note="item.uploadBy || '--'" />
                <t-cell title="消除时间" :note="item.securedTime || '--'" />
              </t-cell-group>
            </view>

            <!-- 隐患审核 S -->
            <!-- v-if="showAudit" -->
            <view v-if="!!info.auditRecords[index]" class="audit-box">
              <view class="title">整改审核信息</view>

              <t-cell-group bordered>
                <t-cell
                  title="审核结果"
                  :style="{
                    '--td-cell-note-color':
                      resultMap[info.auditRecords[index]?.result]?.color,
                  }"
                  :note="
                    resultMap[info.auditRecords[index]?.result]?.name || '--'
                  "
                />
                <t-cell
                  title="审核描述"
                  :description="info.auditRecords[index]?.content || '--'"
                />

                <t-cell
                  title="审核人"
                  :note="info.auditRecords[index]?.createBy || '--'"
                />

                <t-cell
                  title="审核时间"
                  :note="info.auditRecords[index]?.createTime || '--'"
                />
              </t-cell-group>
            </view>
          </template>
        </t-step-item>
      </t-steps>
      <!-- 隐患整改 E -->
    </scroll-view>

    <view v-if="showBtn" class="btn-box">
      <t-button
        size="large"
        theme="primary"
        shape="round"
        block
        @click="goFixed"
        >隐患整改</t-button
      >
    </view>
  </view>
</template>

<script setup>
import { ref, nextTick, getCurrentInstance, computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  hiddenDangerImgs,
  hiddenDangerRectificationImgs,
  getHiddenInfo,
} from "@/api/hiddenDanger.js";

const { proxy } = getCurrentInstance();

const info = ref({});
const imgList = ref([]);
const rectificationImgList = ref([]);
const showRectification = computed(() => {
  return info.value.status !== 1;
});
const showAudit = computed(() => {
  return [3, 99].includes(info.value.status);
});
const showBtn = computed(() => {
  return [1, 3].includes(info.value.status);
});

onLoad(async () => {
  await nextTick();
  const eventChannel = proxy.getOpenerEventChannel();
  eventChannel.on("sendInfo", (data) => {
    //data:接收到的数据
    console.log(data);
    info.value = data.info;

    getData();
    getInfo();
  });
});

onShow(() => {
  if (!info.value.id) return;

  getInfo();
});

const statusMap = {
  1: {
    name: "待整改",
    color: "red",
  },
  2: {
    name: "待审核",
    color: "#dad60f",
  },
  3: {
    name: "已驳回",
    color: "#DA590F",
  },
  99: {
    name: "已整改",
    color: "#0fda2a",
  },
};

const resultMap = {
  1: {
    name: "通过",
    color: "#0fda2a",
  },
  0: {
    name: "驳回",
    color: "#DA590F",
  },
};

const getData = () => {
  const id = info.value.id;
  hiddenDangerImgs(id).then((res) => {
    if (Array.isArray(res.data)) {
      imgList.value = res.data.map((item) => item.picUrl);
    }
  });
  hiddenDangerRectificationImgs(id).then((res) => {
    if (Array.isArray(res.data)) {
      rectificationImgList.value = res.data.map((item) => item.picUrl);
    }
  });
};

const getInfo = () => {
  const id = info.value.id;
  getHiddenInfo(id).then((res) => {
    // console.log("info", res);
    if (res.code === 0) {
      info.value = res.data;
    }
  });
};

const goFixed = () => {
  uni.navigateTo({
    url: "/pages/hiddenDangerFix/index",
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit("sendInfo", {
        info: info.value,
      });
    },
  });
};
</script>

<style lang="less" scoped>
.list {
  //   height: 90vh;

  .title {
    font-size: 46rpx;
    font-weight: bold;
    padding: 20rpx;
  }
}

.img-list {
  display: flex;
  flex-wrap: wrap;

  .image-container {
    margin-right: 10px;
    margin-top: 10px;
  }
}

.rectification-box,
.audit-box {
  margin-top: 40rpx;
}

.step-box {
  padding: 30rpx;
}

.btn-box {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 30rpx;
  height: 100rpx;
  background-color: #fff;
  border-top: 1rpx solid #e5e5e5;
  position: absolute;
  bottom: 20rpx;
  width: 100%;
}
</style>
